<template>
  <transition-group
    name="collapse-join"
    class="transition-group"
    :class="[className]"
    :tag="tag"
    @before-enter="beforeEnterActive"
    @enter="enterActive"
    @leave="leaveActive"
  >
    <slot></slot>
  </transition-group>
</template>

<script lang="ts">
export default {
  name: 'CollapseJoinTransition'
}
</script>

<script setup lang="ts">
import Velocity from 'velocity-animate'

const props = defineProps({
  tag: {
    type: String,
    default: 'div'
  },
  className: {
    type: String,
    default: ''
  },
  translateX: {
    type: String,
    default: '30px'
  },
  translateY: {
    type: String,
    default: '0px'
  }
})

const beforeEnterActive = (el: Element) => {
  el.setAttribute('style', 'opacity: 0;')
}
// 进场动画
const enterActive = (el: Element, done: () => void) => {
  setTimeout(() => {
    Velocity(el, { translateX: props.translateX, translateY: props.translateY }) // 初始化偏移
    Velocity(el, { opacity: 1, translateX: '0px', translateY: '0px' }, { complete: done }) // 回正位
  }, ((Number(el.getAttribute('data-index')) ?? 0) % 10) * 120)
}
// 离场动画
const leaveActive = (el: Element, done: () => void) => {
  Velocity(
    el,
    { opacity: 0, translateX: props.translateX, translateY: props.translateY },
    { duration: 120, complete: done }
  )
}
</script>

<style lang="scss" scoped>
.transition-group {
  overflow-x: hidden;
}
:deep(.collapse-join-move) {
  transition: all 0.5s ease;
}
:deep(.collapse-join-leave-active) {
  position: absolute;
}
</style>
